<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            color: red;
        }
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <h2>Vue模板语法</h2>
        <div id="app"  v-cloak>
            <h2>事件绑定---自定义按键修饰符</h2>
            <input type="text" v-on:keyup='handle' v-model='info'>

            <p>只有输入A的时候才在控制台打印结果</p>
            <input type="text" v-on:keyup.65='handle' v-model='info'>

            <p>自定义一个键(这是a)触发想要的功能</p>
            <input type="text" v-on:keyup.aaa='handle' v-model='info'>

        <p style="color: wheat;background: red;">
                输入后去控制台打印对应的键码值
        </p>

        </div>
</body>
<script src="./js/vue.js"></script>
<script>
    /*
        需求：
                1、点击回车 完成表单提交  v-on:keyup.enter='handleSubmit'
                2、点击delete键清空表单  v-on:keyup.delete='clearContent'

        总结：
                第45行.aaa要与v-on:keyup.aaa='handle'中的aaa对应

    */
    Vue.config.keyCodes.aaa = 65
    var vm = new Vue({
        el: '#app',
        data: {
           info: ''
        },
        methods:{
            handle:function(event){
                console.log(event.keyCode)
            }
        }
    })
</script>
</html>